<script src="<?php echo base_url(); ?>js/holder.js"></script>

<!-- Row 1 holds the thumbnail and the materials images -->
<div class="row" id="drink-row">
    <div class="col-xs-12 col-md-2" id="drink-thumb">
        <div id="drink-image-holder">
            <img data-src="holder.js/100%x150" alt="...">
            <div id="thumb-hover-menue" class="invisible">
                <span class="glyphicon glyphicon-user" rel="tooltip" title="Author"> <a href="#">Captain Cock</a></span><br>
                <span class="glyphicon glyphicon-tag" rel="tooltip" title="Category"> <a href="#">Sour</a></span>
            </div>
        </div>
        <div class="progress" id="drink-rating-bar" rel="tooltip" title="User Rating: 80% (out of 12)">
            <a href="#" class="ratingbutton invisible"><span class="glyphicon glyphicon-minus" rel="tooltip" title="Demote"></span></a>    
            <span class="" style="position: absolute; left: 40%; right: 50%;">80%</span>
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
            <a href="#" class="ratingbutton invisible"><span class="glyphicon glyphicon-plus" rel="tooltip" title="Promote"></span></a>
        </div>
    </div>
    <div class="col-xs-12 col-md-10" id="drink-materials">   
    </div>
</div>

<!-- Row 2 holds the description and the ingredient list -->
<div class="row" id="drink-row">
    <div class="col-xs-12 col-md-2" id="drink-ingredients">
        <table class="table table-condensed">
            <tr>
                <th>#</th>
                <th>Ingredients</th>
            </tr>
            <tr>
                <td>2 cl</td>
                <td><a href="">Vodka</a></td>
            </tr>
            <tr>
                <td>2 cl</td>
                <td><a href="">Rum</a></td>
            </tr>
            <tr>
                <td>8 cl</td>
                <td><a href="">Orange juice</a></td>
            </tr>
            <tr>
                <td>2 cl</td>
                <td><a href="">Lime juice</a></td>
            </tr>
            <tr>
                <td>1 cl</td>
                <td><a href="">Cranberry Sirup</a></td>
            </tr>
        </table>
        <hr>
        <span class="glyphicon glyphicon-compressed"></span> <a href="#">Boston Shaker</a><br>
        <span class="glyphicon glyphicon-tint"></span> <a href="#">30%</a><br>
        <span class="glyphicon glyphicon-glass"></span> <a href="#">Longdrink</a>
    </div>
    <div class="col-xs-12 col-md-10" id="drink-description">
        <h4>Instructions <small>on how to do it like a bartender.</small></h4>
        <p class="">
            Fill the shaker glass with up to 4 medium sized cubes of ice.<br>
            Pour vodka, rum, orange juice and lime juice into the glass and lock the shaker.<br>
            Shake well for 10-15 seconds and pour the drink into the longdrink glas, <br>
            use a strainer if possible.
            Take a bar spoon and slowly pour the cranberry sirup on top of the drink.
        </p>
        <hr>
        <h4>Decoration <small>isn't just for the eye.</small></h4>
        <p>
            Orange slices, cocktail cherries and optionally a lime wedge.
        </p>
    </div>
</div>